<template>
  <a-card v-if="loading == false" class="cardBox mytask_undo_operate_div" :bordered="false">
    <div slot="title" class="title">
      <page-header-wrapper :title="false"></page-header-wrapper>

      <!-- 申请类型 -->

      <!-- <div class="title_combination">
        返回按钮
        <a-button
          @click="handleBack"
          type="text"
          style="font-weight: 550; font-size: 1.1rem; border: none; margin: 0; padding: 0px 15px 3px 0px"
        >
          <a-icon type="arrow-left" />
          返回
        </a-button>
        <a-divider type="vertical" style="margin-left: 0" />
        <div class="title_center">
          <a-popover v-if="$route.params.processName" placement="topLeft">
            <template slot="content">
              <span>{{ $route.params.processName }}</span>
            </template>
            {{
              $route.params.processName.length > 15
                ? $route.params.processName.substring(0, 15) + '...'
                : $route.params.processName
            }}
          </a-popover>
        </div>
      </div> -->

      <!-- 任务详情 -->
      <!-- <div> -->
      <!-- <a-tag v-if="$route.params.taskName" color="#2db7f5">
          {{ $route.params.taskName }}
        </a-tag>
        <a-tag @click="copyClick($route.params.applyno)" v-if="$route.params.applyno">
          {{ $route.params.applyno }}
        </a-tag>
        <a-tag v-if="$route.params.acceptcode" @click="copyClick($route.params.acceptcode)">
          {{ $route.params.acceptcode }}
        </a-tag> -->
      <!-- <a-tag v-if="$route.params.proctype_text" color="#3cb371">
          {{ $route.params.proctype_text }}
        </a-tag> -->
      <!-- <a-tag v-if="processNext.currentgroup">
          当前环节：
          <a-tooltip placement="topLeft">
            <template slot="title">
              {{ processNext.groupname }}
            </template>
            <a-icon type="team" />
            {{ processNext.currentgroup }}
          </a-tooltip>
        </a-tag> -->
      <!-- </div> -->

      <!-- 任务来源 -->
      <!-- <taskSource
        :style="processNext.currentgroup ? 'margin-left: 150px;' : ''"
        @f_toHandlingRecords="tabChange('8')"
        :processinstanceid="this.$route.params.processinstanceid"
      /> -->
    </div>

    <div class="opeart_line_div">
      <!-- tab 盒子 -->
      <div class="tab_div">
        <a-tabs
          class="custom-tabs"
          v-model="key"
          @change="handleTabChange"
          :tabBarStyle="{ borderBottom: 'unset', height: '50px' }"
        >
          <a-tab-pane key="1">
            <div slot="tab">申请信息</div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <div slot="tab">申请材料</div>
          </a-tab-pane>
          <a-tab-pane key="3">
            <div slot="tab">其他材料</div>
          </a-tab-pane>
          <a-tab-pane key="4" v-if="caseCategoryList.includes(this.$route.params.category)">
            <div slot="tab">办案程序</div>
          </a-tab-pane>
          <a-tab-pane key="5" v-if="$route.params.isExecute">
            <div slot="tab">决定履行</div>
          </a-tab-pane>
          <a-tab-pane key="6">
            <div slot="tab">复议文书</div>
          </a-tab-pane>
          <a-tab-pane key="7">
            <div slot="tab">过程材料</div>
          </a-tab-pane>
          <a-tab-pane key="8" v-if="$route.params.isShowArchive">
            <div slot="tab">案件归档</div>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- 操作栏 -->
      <div class="title_backBtn">
        <div class="title_backBtn_div">
          <div
            class="title_backBtn_div_label"
            v-if="this.$route.params.category == Tp_categoryValue['accept']"
            @click="getSimilarityModal()"
          >
            <!-- <a-tooltip> -->
            <template slot="title">相似度查询</template>
            <img class="title_backBtn_material" icon="search" src="@/assets/images/query.png" />
            <!-- </a-tooltip> -->
            <div>相似度查询</div>
          </div>

          <div class="title_backBtn_div_label" @click="splitMaterial()">
            <!-- <a-tooltip> -->
            <template slot="title">分屏材料预览</template>
            <img class="title_backBtn_material" src="@/assets/images/screen.png" alt="" />
            <!-- </a-tooltip> -->
            <div>分屏材料预览</div>
          </div>

          <div class="title_backBtn_div_label" @click="aiChat()">
            <!-- <a-tooltip> -->
            <template slot="title">AI智辅</template>
            <img class="title_backBtn_material" src="@/assets/images/AI.png" alt="" />
            <!-- </a-tooltip> -->
            <div>AI智辅</div>
          </div>

          <div class="title_backBtn_div_label" @click="notePadAdd()">
            <!-- <a-tooltip> -->
            <template slot="title">记事本</template>
            <img class="title_backBtn_material" src="@/assets/images/notepad.png" alt="" />
            <!-- </a-tooltip> -->
            <div>记事本</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div
        class="timeLineArea"
        style="overflow: hidden; transition: width 0.5s ease-in-out"
        :style="{ width: hide ? '30%' : 0 }"
      >
        <img class="icon" v-if="hide" @click="handleClickShrinkButton" src="@/assets/images/shrink.png" alt="" />

        <WF_MYTASKUNDORECORD ref="Wf_MyTaskUndoRecordRef" :processinstanceid="$route.params.processinstanceid" />
      </div>
      <div class="right">
        <!-- <a-icon
          class="icon"
          v-if="hide"
          @click="handleClickShrinkButton"
          :style="{ fontSize: '18px' }"
          type="menu-fold"
        />
        <a-icon class="icon" v-else @click="handleClickShrinkButton" :style="{ fontSize: '18px' }" type="menu-unfold" /> -->
        <!-- <img class="icon" v-if="hide" @click="handleClickShrinkButton" src="@/assets/images/shrink.png" alt="" /> -->
        <div style="background:#f5f6f9">
          <img class="icon1" v-if="!hide" @click="handleClickShrinkButton" src="@/assets/images/unfold.png" alt="" />
        </div>

        <div class="formBox" v-if="key == '1'">
          <TaskFormView
            v-if="key == '1'"
            ref="formView"
            @fGetEnclosure="sGetEnclosure"
            @f_SetFormData="s_SetFormData"
            @f_getStepBtnList="s_getStepBtnList"
            :pattern="Number($route.params.pattern)"
            :applyid="$route.params.applyid"
          ></TaskFormView>
          <CaseMaterial
            ref="caseMaterial"
            style="margin: 0px 40px"
            v-if="key == '1'"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :modelKey="$route.params.modelKey"
            :isEditModel="[3, 5].includes(Number(this.$route.params.pattern))"
            :category="this.$route.params.category"
          ></CaseMaterial>
        </div>
        <div v-else-if="key == '2'">
          <preFile
            ref="preFile"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :taskid="$route.params.taskid"
            :isEdit="[3, 5].includes(Number($route.params.pattern))"
            :tabLists="Array('applicant', 'agent')"
            :isShowTypical="true"
            @openReview="openReview"
            @onClose="closeReview"
          />
        </div>
        <div v-else-if="key == '3'">
          <ThirdRespondentMaterial
            v-if="key == '3'"
            :category="this.$route.params.category"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :isEditModel="[3, 5].includes(Number(this.$route.params.pattern))"
          />
        </div>

        <div v-else-if="key == '4'">
          <CaseTab
            ref="casetabRef"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :taskid="$route.params.taskid"
            :category="$route.params.category"
            :isEditModel="[3, 5].includes(Number(this.$route.params.pattern))"
            :processinstanceid="$route.params.processinstanceid"
          />
        </div>
        <div v-else-if="key == '5'">
          <CaseTabExecute
            ref="caseTabExecuteRef"
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :taskid="$route.params.taskid"
            :category="$route.params.category"
            :isEditModel="$route.params.isExecuteEdit"
            :processinstanceid="$route.params.processinstanceid"
          />
        </div>
        <div v-else-if="key == '6'">
          <a-spin :spinning="LogPaperworkSpinning" tip="加载中...">
            <LogPaperwork :key="logPaperworkKey" :applyid="$route.params.faapplyid || $route.params.applyid" />
          </a-spin>
        </div>
        <div v-else-if="key == '7'">
          <a-spin :spinning="LogMaterialworkSpinning" tip="加载中...">
            <LogMaterialwork :applyid="$route.params.faapplyid || $route.params.applyid" />
          </a-spin>
        </div>
        <div v-else-if="key == '8'">
          <ArchiveInfoDetail
            :applyid="$route.params.faapplyid || $route.params.applyid"
            :reason="$route.query.queryParam.reason"
            :taskid="this.$route.params.taskid"
            :processinstanceid="$route.params.processinstanceid"
            :instid="$route.query.queryParam.instid"
            :isEditVal="$route.query.queryParam.isEditVal"
            :isDocEditVal="$route.query.queryParam.isDocEditVal"
            :serviceType="St_serviceTypeValue.REVIEW"
          />
        </div>
      </div>
    </div>

    <FormOperation
      v-if="
        !hideBtnList.includes($route.params.category) &&
        [3, 5].includes(Number(this.$route.params.pattern)) &&
        processState == true
      "
      ref="btnRef"
      :style="{ zIndex: operation_zindex }"
      :formid="this.$route.params.formid"
      :processinstanceid="this.$route.params.processinstanceid"
      :processdefinitionid="this.$route.params.processdefinitionid"
      :taskid="this.$route.params.taskid"
      :stepid="this.$route.params.stepid"
      :owner="this.$route.params.owner"
      :taskName="this.$route.params.taskName"
      :pattern="Number(this.$route.params.pattern)"
      :category="$route.params.category"
      @saveForm="saveForm"
      @f_pointTab="s_pointTab"
    />

    <!-- 行政复议记事本 -->
    <AddNotepad ref="notePadRef" :applyid="$route.params.applyid" :acceptcode="$route.params.acceptcode"> </AddNotepad>

    <!-- 相似度数据模态框显示 -->
    <AcceptSimilaryReview
      ref="similayModalRef"
      :applyid="$route.params.faapplyid || $route.params.applyid"
    ></AcceptSimilaryReview>

    <!-- ai机器人 -->
    <AiRobotComponent ref="aiRobotComponentRef" />

    <!-- 分屏展示 -->
    <MaterialSplitScreen ref="materialSplitScreen"></MaterialSplitScreen>
  </a-card>
</template>

<script>
import { getProcessVariable, getHandleParams } from '@/api/workflow/wf_ProcessInstance.js'
import { copyValue } from '@/utils/formassembly/util.js'
import { Tp_categoryValue, hideThirdCategoryList, caseCategoryList, hideBtnList } from '@/enumeration/Tp_category.js'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype.js'
import { St_serviceTypeValue } from '@/enumeration/St_serviceType.js'
const SFAPPROVE_URL = process.env.VUE_APP_WEB_URL
export default {
  data () {
    return {
      hideBtnList: hideBtnList, // 需要隐藏操作按钮的环节
      Tp_categoryValue: Tp_categoryValue, // 分类标识
      caseCategoryList: caseCategoryList, // 显示办案程序的分类标识
      hideThirdCategoryList: hideThirdCategoryList, // 隐藏第三人的流程标识
      St_serviceTypeValue: St_serviceTypeValue, //  业务类型
      processState: null, // 流程状态
      processNext: this.$route.query, // 流程下一步的信息
      LogPaperworkSpinning: false, // 系统文书加载动画
      logPaperworkKey: 0, // 系统文书刷新key
      loading: true, // 页面参数是否初始化完成
      modelKey: this.$route.params.modelKey,
      applyid: null, // 申请表id
      variableMap: {}, // 流程变量Map, 用来配置表达式
      isEmpty: false, // 空状态
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      enclosureList: [], // 表单附件类型控件item
      key: '1', // 卡片切换key
      operation_zindex: 9,
      isBtn2Show: true, // 底部第二个按钮显示吗？默认会显示
      btn3Name: '', // 底部第三个按钮名称
      LogMaterialworkSpinning: false, // 材料文件加载动画
      Tp_proctypeEnum: Tp_proctypeEnum,
      hide: false
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   // this.$refs.Wf_MyTaskUndoRecordRef.
    //   this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
    // })
  },
  async created () {
    // this.$nextTick(() => {
    // this.$refs.Wf_MyTaskUndoRecordRef.
    setTimeout(() => {
      this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
    }, 500)
    // })
    // 防止归档页面掉参 缓存
    if (this.$route.query.queryParam) {
      for (const key in this.$route.query.queryParam) {
        this.$route.params[key] = this.$route.query.queryParam[key]
      }
    }

    // 根据taskid查询页面参数
    await getHandleParams(this.$route.params.taskid)
      .then(res => {
        console.log('页面所需参数', res)
        if (res.code == 0 && res.data != null) {
          for (const key in res.data) {
            this.$route.params[key] = res.data[key]
          }
          this.processState = res.data.state
        } else {
          this.$message.error('查询处理页面所需要的参数失败!')
        }
      })
      .finally(() => {
        this.loading = false
      })
    this.findProcessVariable()
    console.log('路由------', this.$route)
    console.log('路由参数------', this.$route.params)
    // 重定向页面指定tab
    this.redirectTab()
  },
  methods: {
    // 收缩左边图标
    handleClickShrinkButton () {
      console.log('his.hide', this.hide)
      this.hide = !this.hide
    },
    // 重定向页面指定tab
    redirectTab () {
      // 归档页面默认跳转
      if (
        (this.$route.query && this.$route.query.queryParam && this.$route.query.queryParam.isShowArchive) ||
        this.$route.query.url.indexOf('ArchiveUndoList') > 0 ||
        this.$route.query.url.indexOf('ArchiveDoneList') > 0
      ) {
        this.key = '8'
        // 当前对象为空，则去缓存里拿取数据
        if (this.$route.query.queryParam == undefined || this.$route.query.queryParam === '[object Object]') {
          const archiveDataStr = localStorage.getItem('archiveData')
          const archiveData = JSON.parse(archiveDataStr)
          this.$route.query.queryParam = archiveData
          // console.log('路由参数final------', this.$route.query.queryParam)
          for (const key in this.$route.query.queryParam) {
            this.$route.params[key] = this.$route.query.queryParam[key]
          }
        } else {
          for (const key in this.$route.query.queryParam) {
            this.$route.params[key] = this.$route.query.queryParam[key]
          }
        }
      }
      // 其它页面跳转 toTabKey代表指定跳转tab
      if (this.$route.query && this.$route.query.queryParam && this.$route.query.queryParam.toTabKey) {
        this.key = this.$route.query.queryParam.toTabKey
      }
    },
    // 子组件调用修改流程状态
    s_updateState (state) {
      // console.log('s_updateState', state)
      this.$route.params.state = true
      this.processState = state
    },
    // 鼠标点击复制内容
    copyClick (value) {
      if (copyValue(value)) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 查询流程变量, 用来配置表达式
    findProcessVariable () {
      getProcessVariable(this.$route.params.processinstanceid).then(res => {
        if (res.code == 0) {
          this.variableMap = res.data || {}
          // ^ 保存表单数据到Vuex
          this.$store.commit('setPrecessVariable', this.variableMap)
        }
      })
    },
    // 子组件调用, 切换显示的标签页
    s_pointTab (index) {
      // 办案程序直接返回
      if (index == '4') {
        this.key = index
        // 设置办案程序的页签
        this.$nextTick(() => {
          this.$refs.casetabRef.gotoTab(this.$route.params.category)
        })

        return
      } else if (index == '7') {
        this.LogPaperworkSpinning = this.LogMaterialworkSpinning = true
        setTimeout(() => {
          this.logPaperworkKey++
          this.LogPaperworkSpinning = this.LogMaterialworkSpinning = false
        }, 1000)
      }
      if (this.$refs.preFile) {
        this.$refs.preFile.onClose()
      }
      this.key = index
    },
    // 找到按钮回显环节需要用到的id
    s_getStepBtnList (stepid) {
      console.log('管理员按钮', this.$route.params.pattern)
      this.$nextTick(() => {
        if (this.$refs.btnRef) {
          this.$refs.btnRef.getStepBtnList(stepid)
        }
      })
    },
    // 父表单组件调用, 给表单填写数据
    s_SetFormData (body) {
      this.$refs.btnRef.sSetFormData(body)
    },
    // 按钮组件_通过时保存表单数据
    saveForm () {
      // dom存在立马保存
      if (this.$refs.formView) {
        this.$refs.formView.saveForm(true)
      } else {
        // dom不存在切换回表单校验完再保存
        this.key = '1'
        setTimeout(() => {
          this.$refs.formView.saveForm(true)
        }, 1000)
      }
    },
    // 子组件找到的文件类型给值方法
    sGetEnclosure (list) {
      this.enclosureList = []
      list &&
        list.forEach(v => {
          const item = {}
          this.initItme(item, v)
          this.enclosureList.push(item)
        })
      // console.log('表单控件类型', this.enclosureList)
    },
    // 递归复制对象初始化
    initItme (item, v) {
      for (const key in v) {
        if (typeof v[key] === 'object') {
          const obj = {}
          item[key] = this.initItme(obj, v[key])
        } else {
          if (key == 'disabled') {
            item[key] = true
          }
          // 附件区域不允许添加
          else if (key == 'limit') {
            if (this.$route.params.taskid == 'undefined' || this.$route.params.taskid == undefined) {
              item[key] = 0
            }
          } else {
            item[key] = v[key]
          }
        }
      }
      return item
    },
    // tab切换事件
    async tabChange (key) {
      this.isEmpty = false
      console.log('选中', key)
      this.key = key
      if (key == '1') {
        if (this.enclosureList.length == 0) {
          this.isEmpty = true
        } else {
          if (JSON.stringify(this.enclosureList[Number(0)].options.defaultValue) == '{}') {
            this.isEmpty = true
          }
        }
      }
      // else if (key == '8') {
      //   this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      // }
    },
    // 返回按钮
    handleBack () {
      // console.log('返回', this.$route.query)
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey
            }
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam
            }
          })
        }
        //console.log('this.$route.query.queryParam',this.$route.query.queryParam);
      } else {
        this.$router.go(-1)
      }
    },
    handleTabChange (activeKey) {
      console.log(activeKey)
      if (activeKey == '4') {
        this.hide = true
      } else {
        this.hide = false
      }
      // console.log('---', this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord())
      // this.$nextTick(() => {
      //   // this.$refs.Wf_MyTaskUndoRecordRef.
      //   this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      // })
    },
    openReview () {
      this.operation_zindex = 2000
    },
    closeReview () {
      this.operation_zindex = 9
    },
    // 查询当前的相似度数据
    getSimilarityModal () {
      if (this.$refs.similayModalRef) {
        this.$refs.similayModalRef.reloadModal()
      }
    },
    // 分屏展示方法
    splitMaterial () {
      const applyid = this.$route.params.faapplyid || this.$route.params.applyid
      this.$refs.materialSplitScreen.init(applyid)
    },
    aiChat () {
      if (this.$refs.aiRobotComponentRef) {
        this.$refs.aiRobotComponentRef.showInput()
      }
    },
    notePadAdd () {
      if (this.$refs.notePadRef) {
        this.$refs.notePadRef.showInput()
      }
    }
  },
  beforeDestroy () {
    // 任务组件处理销毁之前清除vuex缓存的表单数据, 防止下次审批时污染
    this.$store.state.Processform.formData = {}
  },
  // 依赖components
  components: {
    TaskFormView: () => import('@/views/workflow/Wf_TaskForm.vue'),
    PreFile: () => import('../aprv/pre_trialFile.vue'),
    LogPaperwork: () => import('../aprv/log_paperwork.vue'),
    FormOperation: () => import('@/views/workflow/Wf_FormOperation.vue'),
    taskSource: () => import('./Wf_taskSource.vue'),
    AcceptSimilaryReview: () => import('@/views/customComponents/acceptSimilaryReview.vue'),
    LogMaterialwork: () => import('../aprv/log_materials_view.vue'),
    CaseTab: () => import('@/views/handleCase/CaseTab.vue'),
    CaseTabExecute: () => import('@/views/handleCase/CaseTabExecute.vue'),
    ThirdRespondentMaterial: () => import('@/views/accept/material/ThirdRespondentMaterial.vue'),
    WF_MYTASKUNDORECORD: () => import('@/views/workflow/Wf_MyTaskUndoRecord.vue'),
    ArchiveInfoDetail: () => import('@/views/archive/ArchiveInfoDetail.vue'),
    CaseMaterial: () => import('@/views/handleCase/CaseMaterial.vue'),
    AiRobotComponent: () => import('@/views/base/AiRobotComponent.vue'),
    MaterialSplitScreen: () => import('@/views/materials/MaterialSplitScreen.vue'),
    AddNotepad: () => import('@/views/base/AddNotepad.vue')
  }
}
</script>

<style lang="less" scoped>
.title_generateBtn {
  position: absolute;
  width: 200px;
  right: 225px;
}

.title_combination {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}

.title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  border: none;
}

.title_prefix {
  margin-top: 0.2%;
  width: 4px;
  height: 17px;
  background-color: #5b79fb;
}

.title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.emptyBox {
  position: absolute;
  top: 35%;
  left: 45%;
}

.recordBox {
  display: flex;
  justify-content: center;
}

.formBox,
.recordBox {
  height: 70vh;
  overflow: auto;
  // border: 1px solid red;
}

.imgBox div {
  margin-top: 15px;
  margin-left: -50px;
  position: absolute;
  left: 0;
  top: 0;
}

.imgBox:active {
  opacity: 0.2;
}

.img {
  width: 70px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.imgBox {
  /* height: 300px; */
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.similarity_query {
  width: 24px;
  height: 24px;
  margin-right: 27px;
  margin-top: 43px;
}
.pagework_div {
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 6% !important;
    width: 50px !important;
  }
}
.pagework_div {
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 6% !important;
    width: 50px !important;
  }
}
.box {
  display: flex;
  width: 100%;
  background-color: #f5f6f9;
}
.timeLineArea {
  width: 30%;
  background-color: #f5f6f9;
  margin: 20px 10px 0 15px;
  position: relative;
}
.right {
  width: 70%;
  flex: 1;
  margin: 20px 10px 0 15px;
  background-color: #fff;
  position: relative;
  height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
  // margin-right: -40px;
}
::v-deep .ant-breadcrumb {
  height: 25px;
  font-size: 16px !important;
  margin-left: -24px;
  margin-top: 10px;
}
.core {
  top: 38px !important;
}

.icon {
  // width: 30px;
  position: absolute;
  // left: -75px;
  // top: 15px;
  right: 10px;
  z-index: 5;
  cursor: pointer;
}
.icon1 {
  // width: 20px;
  cursor: pointer;
}
.cardBox {
  position: relative;

  ::v-deep .ant-card-head {
    border: none;
    padding: 10px 0px 0px 0px;
  }
  ::v-deep .ant-card-head-title {
    padding: 10px 0px 0px 16px;
  }

  ::v-deep .ant-breadcrumb-link {
    color: #000;
  }
  ::v-deep .ant-tabs-tab {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    // margin-top: 10px;
    // margin-bottom: 50; /* 根据需要调整 */
  }
  // ::v-deep .ant-spin-container {
  //   height: 70vh;
  //   overflow: auto;
  // }
  //   ::v-deep .ant-tabs {
  //     margin-top: -20px;
  //   }
}
.cardBox > ::v-deep .ant-card-body {
  padding: 0 !important;
}
// ::v-deep .ant-layout-content,
// .ant-pro-basicLayout-content {
//   padding: 0 !important;
// }
::v-deep .custom-tabs {
  height: 50px !important;
}
::v-deep .ant-tabs-nav-wrap {
  height: 65px;
}
::v-deep .ant-tabs-tab-active > div {
  margin-bottom: 10px;
}

.mytask_undo_operate_div {
  ::v-deep .ant-pro-page-header-wrap-page-header-warp {
    padding: 0px 16px;
  }
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 3.5%;
    width: 50px !important;
  }

  .opeart_line_div {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
  }
  .tab_div {
    padding: 0px 16px;
    flex: 2;
  }

  .title_backBtn {
    display: flex;
    align-content: center;
    flex: 1;
    position: relative;
    justify-content: flex-end;
    padding-right: 20px;
    // flex-direction: column;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .title_backBtn_div {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: auto;
  }

  .title_backBtn_div_label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 10px;
    cursor: pointer;
    font-size: 16px;
  }

  .title_backBtn_material {
    margin-right: 10px;
  }
}
</style>
